<%@ include file="/WEB-INF/views/taglib.jsp" %>
 <c:url value="/workOrder/search" var="paginationUrl"></c:url>
 <div class="span-5">
 	<div id="workOrderWeek">
 		<input type="hidden" name="prevDate" id="prevDate" />
 		<input type="hidden" name="nextDate" id="nextDate" />
 	<p class="workOrderTitle">
 		<a href="#" onclick="prevWeek()"><img src="${imageUrl}/icon_ArrowLeft_Calendar.jpg" /></a>
 		<a href="#" onclick="nextWeek()"><img src="${imageUrl}/icon_ArrowRight_Calendar.jpg" /></a>
 		&nbsp;<span id="titleWeek"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	<p class="woDate clearfix">
 		<span class="woDateItem span-3"></span>
 	</p>
 	</div>
 	
 	<div class="CD_Calendar_Legend">
	<span class="span-4 title">Legend</span>
    <div class="span-2">
    <span><img src="${webapp}/resources/images/icon_legendGreen.jpg"></span>
    <span>Completed</span>
    <span><img src="${webapp}/resources/images/icon_legendYellow.jpg"></span>
    <span>In Process</span>
    </div>
    <div class="span-2 last">
    <span><img src="${webapp}/resources/images/icon_legendBlue.jpg"></span>
    <span>In Queue</span>
    <span>
    <img src="${webapp}/resources/images/icon_legendRed.jpg"></span>
    <span>Closed</span>
    </div>
    <div class="span-2 last">
    <img src="${webapp}/resources/images/icon_legendGrey.jpg"></span>
    <span>Cancel</span>
    </div>
    

</div>
 </div>
 <div class="span-18 last">  
 <div>
 <h3 class="left">Work Order Search</h3>
 <a href="<c:url value="/workOrder/create" />" class="button right">
	 <img align="absmiddle" src="${imageUrl}/icon_add.png">  Create Work Order
</a>
 <a onclick="$('.searchCriteria').toggle();" class="button right">
	 <img align="absmiddle" src="${imageUrl}/icon_detail.png">  Toggle Search Criteria
</a>
</div>
<div class="clear"></div>
 <form:form id="form" method="get" modelAttribute="workOrderSearchCriteria" cssClass="simpleForm">
 <div class="searchCriteria">
 <fieldset>
 	<legend>Search Criteria</legend>
 	<div class="span-8">
	<p>
	<label>
	WO Code
	</label> 
	<form:input path="search['workOrderCode']" id="woCode" />
	</p>
	<p>
	<label>
	Taxi No
	</label> 
	<form:input path="search['vehicleId']"  id="vehicleId" />
	</p>
	<p>
	<label>
	Technician
	</label> 
	<form:input path="search['personName']"   id="personName" />
	</p>
	</div>
	<div class="span-9">
	<p>
	<label>
	Status
	</label> 
	<form:input path="search['workOrderStatus']" id="workOrderStatus" />
	</p>
	<p>
	<label>
	Start Date
	</label> 
	<form:input path="search['startBookingDate']" id="startBookingDate" /> <input id="startBtn" type="button" class="calendarBtn" />
	</p>
	<p>
	<label>
	End Date
	</label>
	<form:input path="search['endBookingDate']"  id="endBookingDate"/> <input id="endBtn"  type="button" class="calendarBtn" />
	</p>
	</div>
</fieldset>
	<span class="right">
	  	<button type="submit" class="button">Search</button>
	 </span>
 </div>
 </form:form>	
 <div class="clear"></div>
 <fieldset>
 	<legend>Search Result</legend>
 	<c:choose>
 		<c:when test="${searchResult.resultCount==0}">
 		<div class="notice">
 		<span class="ui-icon ui-icon-info left marginright5"></span>
 		No records </div>
 		</c:when>
 	<c:otherwise>
 <table class="gridSearch">
 <thead>	
 	<tr>
 		<th>S/N</th>
 		<th>
 		<aims:sort columnName="workOrderCode" label="WO Code"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="vehicleId" label="Taxi No"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="dateBooking" label="Date"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="technician" label="Technician"></aims:sort>
 		</th>
 		<th>
 		<aims:sort columnName="workOrderStatus" label="Status"></aims:sort>
 		</th>
 	</tr>
 </thead>
 <tbody>
 	<c:forEach items="${searchResult.result}" var="result" varStatus="status">
 	<tr <c:if test="${(status.count%2)==0 }">class="alt"</c:if>>
 		<td>${searchResult.recordNo+status.index}</td>
 		<td>
 		<c:url value="/workOrder/update" var="editUrl"></c:url>
 		<a href="${editUrl}/${result.workOrderId}?tab=2">
 		${result.workOrderCode}
 		</a></td>
 		<td>${result.vehicleId}</td>
 		<td>
 		<fmt:formatDate value="${result.dateBooking}" pattern="${globalDateFormatJava}" /><br>
 		<small>
 		<img align="absmiddle" src="${imageUrl}/red-clock.png" title="Workorder Time In"> <fmt:formatDate value="${result.dateBooking}" pattern="HH:mm" />
 		<c:if test="${(result.timeCheckIn)!=null }">
 		<img align="absmiddle" src="${imageUrl}/blue-clock.png"  title="Technician Clock In"> <fmt:formatDate value="${result.timeCheckIn}" pattern="HH:mm"/>
 		</c:if>
 		<c:if test="${(result.timeCheckOut)!=null }">
 		<img align="absmiddle" src="${imageUrl}/green-clock.png"  title="Technician Clock Out"> <fmt:formatDate value="${result.timeCheckOut}" pattern="HH:mm"/>
 		</c:if>
 		</small>
 		</td>
 		<td>${result.technician.personName}</td>
 		<td>${result.workOrderStatus}</td>
			
 		
 		</tr>
 	</c:forEach>
 	
 </tbody>
 <tfoot>
 	<tr><td colspan="10" align="right">
 		<jsp:include page="/WEB-INF/views/pagination.jsp">
 			<jsp:param name="paginationUrl" value="${paginationUrl}" />
 		</jsp:include>
 	</td></tr>
 </tfoot>
 
 </table>
 </c:otherwise>
 </c:choose>
 </fieldset>
  
  </div>
<script type="text/javascript">

		$(document).ready(function() {
			
			cal = Calendar.setup({
		          onSelect: function(cal) { cal.hide() },
		          showTime: false
		    });
			
			cal.manageFields("startBtn", "startBookingDate", globalJsCalDateFormat);
			cal.manageFields("endBtn", "endBookingDate", globalJsCalDateFormat);
			
			$('.searchCriteria').hide();
			
			$('#workOrderWeek')
			.ajaxStart(function() {
				$(this).addClass('progress');
			})
			.ajaxStop(function() {
				$(this).removeClass('progress');
			});
			
			
			 $.getJSON("<c:url value="/ajax/workOrder"></c:url>?startDate=${workOrderSearchCriteria.search['startBookingDate']}", refreshCalendar);
		});
		
		function refreshCalendar(data) {

			$('#titleWeek').text(data.titleWeek);
			$('#prevDate').val(data.prevDate);
			$('#nextDate').val(data.nextDate);
			var workOrderWeek = $('#workOrderWeek');
			for(var i=0;i<data.dateOfWeek.length;i++)
			{
				//alert($('.woDate:eq('+i+')',workOrderWeek).find('.woDateItem').text(i));
				var woDate = $('.woDate:eq('+i+')',workOrderWeek);
				woDate.html('<span class="woDateItem span-4"></span>');
				var woDateItem = woDate.find('.woDateItem');
				woDateItem.text(data.shortDate[i]);
				
				if(isNumeric(data.statusCount[i].INQUEUE))
				{	
					woDateItem.after("<span class='woDateStatus blue span-4'><a href='#' onclick=\"searchWeek('"+data.dateOfWeek[i]+"','queue')\">In-Queue - "+data.statusCount[i].INQUEUE+"</a></span>");	
				}
				if(isNumeric(data.statusCount[i].INPROCESS))
				{	
					woDateItem.after("<span class='woDateStatus yellow span-4'><a href='#' onclick=\"searchWeek('"+data.dateOfWeek[i]+"','process')\">In-Process - "+data.statusCount[i].INPROCESS+"</a></span>");	
				}
				if(isNumeric(data.statusCount[i].COMPLETED))
				{	
					woDateItem.after("<span class='woDateStatus green span-4'><a href='#' onclick=\"searchWeek('"+data.dateOfWeek[i]+"','completed')\">Completed - "+data.statusCount[i].COMPLETED+"</a></span>");	
				}
				if(isNumeric(data.statusCount[i].CLOSED))
				{	
					woDateItem.after("<span class='woDateStatus red span-4'><a href='#' onclick=\"searchWeek('"+data.dateOfWeek[i]+"','closed')\">Closed - "+data.statusCount[i].CLOSED+"</a></span>");	
				}
				if(isNumeric(data.statusCount[i].CANCEL))
				{	
					woDateItem.after("<span class='woDateStatus grey span-4'><a href='#' onclick=\"searchWeek('"+data.dateOfWeek[i]+"','cancel')\">Cancel - "+data.statusCount[i].CANCEL+"</a></span>");	
				}
			}
		}
		
		function prevWeek()
		{
			$.getJSON("<c:url value="/ajax/workOrder"></c:url>?startDate="+$('#prevDate').val(), refreshCalendar);
		}
		

		function nextWeek()
		{
			$.getJSON("<c:url value="/ajax/workOrder"></c:url>?startDate="+$('#nextDate').val(), refreshCalendar);
		}
		
		function searchWeek(woDate,woStatus)
		{
			var formSearch = $('#form');
			$('#woCode',formSearch).val('');
			$('#vehicleId',formSearch).val('');
			$('#personName',formSearch).val('');
			
			$('#startBookingDate',formSearch).val(woDate);
			$('#endBookingDate',formSearch).val(woDate);
			$('#workOrderStatus',formSearch).val(woStatus);
			formSearch.submit();
		}
</script>